import React, { PureComponent } from 'react';
// 引入样式
import './scss/life.scss';
// 引入路由
import { NavLink } from 'react-router-dom';
export default class Life extends PureComponent {
  componentDidMount () {
    // 网页加载返回顶部
    window.scrollTo(0, 0);
  }
  render () {
    return (
      <div className='life'>
        {/* 解析图片地址 */}
        <NavLink to='/life/Upload'>
          <div className='king_body_kuai' style={{ background: '#888069' }}>
            <img className='king_body_icon' src={require('./image/jiexi.png')} alt="解析" width='40vw' />
            <p>Life Upload</p>
            <p>解析图片地址</p>
          </div>
        </NavLink>

        {/* 手机高清壁纸 */}
        <NavLink to='/life/Picture'>
          <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
            <img className='king_body_icon' src={require('./image/bizhi.png')} alt="壁纸" width='25vw' />
            <p>Life Picture</p>
            <p>手机高清壁纸</p>
          </div>
        </NavLink>

        {/* 聊天机器人 */}
        <NavLink to='/life/chat'>
          <div className='king_body_kuai' style={{ background: '#998899' }}>
            <img className='king_body_icon' src={require('./image/liaotian.png')} alt="聊天机器人" width='40vw' />
            <p>Life Chat</p>
            <p>聊天机器人</p>
          </div>
        </NavLink>

        {/* 短网址生成 */}
        <NavLink to='/life/short'>
          <div className='king_body_kuai' style={{ background: '#89d04f' }}>
            <img className='king_body_icon' src={require('./image/duanwangzhi.png')} alt="短网址" width='40vw' />
            <p>Life Short</p>
            <p>短网址生成</p>
          </div>
        </NavLink>

        {/* 在线画板 */}
        <NavLink to='/life/painting'>
          <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
            <img className='king_body_icon' src={require('./image/huaban.png')} alt="画板" width='40vw' />
            <p>Life Painting</p>
            <p>在线画板</p>
          </div>
        </NavLink>

        {/* 手持弹幕 */}
        <NavLink to='/life/bulletChat'>
          <div className='king_body_kuai' style={{ background: '#888069' }}>
            <img className='king_body_icon' src={require('./image/danmu.png')} alt="弹幕" width='40vw' />
            <p>Life BulletChat</p>
            <p>手持弹幕</p>
          </div>
        </NavLink>

        {/* 计算器 */}
        <NavLink to='/life/calculator'>
          <div className='king_body_kuai' style={{ background: '#89d04f' }}>
            <img className='king_body_icon' src={require('./image/jisuanqi.png')} alt="计算器" width='35vw' />
            <p>Life Calculator</p>
            <p>计算器</p>
          </div>
        </NavLink>

        {/* 翻译 */}
        <NavLink to='/life/translate'>
          <div className='king_body_kuai' style={{ background: '#1488f5' }}>
            <img className='king_body_icon' src={require('./image/fanyi.png')} alt="翻译" width='40vw' />
            <p>Life Translate</p>
            <p>翻译</p>
          </div>
        </NavLink>

        {/* 下载PNG图片 */}
        <NavLink to='/life/spider'>
          <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
            <img className='king_body_icon' src={require('./image/konglong.png')} alt="恐龙" width='30vw' />
            <p>Life Spider</p>
            <p>下载PNG图片</p>
          </div>
        </NavLink>

        {/* 舔狗日记 */}
        <NavLink to='/life/flatterer'>
          <div className='king_body_kuai' style={{ background: '#7f8ea0' }}>
            <img className='king_body_icon' src={require('./image/riji.png')} alt="日记" width='35vw' />
            <p>Life Flatterer</p>
            <p>舔狗日记</p>
          </div>
        </NavLink>

        {/* 历史上的今天 */}
        <NavLink to='/life/history'>
          <div className='king_body_kuai'>
            <img className='king_body_icon' src={require('./image/lishi.png')} alt="历史" width='40vw' />
            <p>Life History</p>
            <p>历史上的今天</p>
          </div>
        </NavLink>

        {/* 手机号码归属地 */}
        <NavLink to='/life/phone'>
          <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
            <img className='king_body_icon' src={require('./image/haoma.png')} alt="号码" width='30vw' />
            <p>Life Phone</p>
            <p>手机号码归属地</p>
          </div>
        </NavLink>

        {/* 天气预报 */}
        <NavLink to='/life/weather'>
          <div className='king_body_kuai' style={{ background: '#89d04f' }}>
            <img className='king_body_icon' src={require('./image/tianqi.png')} alt="天气" width='40vw' />
            <p>Life Weather</p>
            <p>天气预报</p>
          </div>
        </NavLink>

        {/* ip地址查询 */}
        <NavLink to='/life/addressip'>
          <div className='king_body_kuai' style={{ background: '#998899' }}>
            <img className='king_body_icon' src={require('./image/ip.png')} alt="ip" width='40vw' />
            <p>Life Addressip</p>
            <p>IP地址查询</p>
          </div>
        </NavLink>

        {/* 网易云音乐热评 */}
        <NavLink to='/life/HotComments'>
          <div className='king_body_kuai' style={{ background: '#7f8ea0' }}>
            <img className='king_body_icon' src={require('./image/wangyiyun.png')} alt="热评" width='40vw' />
            <p>Life HotComments</p>
            <p>网易云音乐热评</p>
          </div>
        </NavLink>

        {/* 内容转二维码 */}
        <NavLink to='/life/QRCode'>
          <div className='king_body_kuai' style={{ background: '#70c3ff' }}>
            <img className='king_body_icon' src={require('./image/erwenma.png')} alt="二维码" width='40vw' />
            <p>Life QRCode</p>
            <p>在线生成二维码</p>
          </div>
        </NavLink>
      </div>
    )
  }
}
